<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示模式</title>
		<style>
			.box{
				width: 300px;
				height: 200px;
				border: 10px solid skyblue;
				
				
				
			}
		.tu	{
			width: 100px;
			height: 200px;
			margin-top: 50px;
			
			
			
		}
		<h3>{
			margin: 10px;
			
		}
		</style>
	</head>
	<body>
		<!--元素的显示模式：
		1.块元素block
		比较霸道，单独占一行
		默认情况宽度和父级元素一样宽
		可以给元素搜索设置宽高,水平居中
		块元素中可以包含行内元素和块元素
		常见块元素：<h1>，<p>,<div>,<ul>,<ol>,<li>...
		2.行内元素inline
		一行显示多个
		默认宽度由内容填充内容多宽元素多宽
		宽高，水平居中，属性无效
		行内元素只能容纳文本火哦其他行内元素
		常见行内元素：<span>,<a>,<strong>,<em>...
		3.行内块元素inline-block
		一行显示多个
		默认宽度有内容填充，内容多款元素多宽
		可以给元素设置宽高
		<input>,<img>,<td>...
		元素显示模式的转换
		display:转换后的显示模式
		display:block.转换为块元素
		text-decoratin: none;(去掉a标签的下划线)
		-->
		<div>
			<img src="img/tu1.jpg.webp"/>
			<h3>hello</h3>
			<p class="box">helllo duanluo</p>
			<span class="box">2399</span>
			<span>2499</span>
			<a href="#">这是链接</a>
		</div>
		
		
	</body>
</html>
